import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import { getCarList } from '@/api'

// vuex 是vue中用于存储公共数据的仓库
// 总共5个核心:
// state 是用来存储数据的，类似vue实例中的data属性
// mutations 是用来定义操作数据的方法，类似vue实例中的methods属性

export default new Vuex.Store({
  // state 是用来存储数据的，类似vue实例中的data属性
  state: {
    userinfo: {},
    cars: [],
    carList:[]
  },
  // mutations 是用来定义操作数据的方法。类似vue实例中的methods属性
  mutations: {
    // 定义一个给userinfo赋值的方法
    setUserInfo(state, user) {
      state.userinfo = user
      localStorage.setItem('userinfo', JSON.stringify(user))
    },
    clearUser(state) {
      state.userinfo = {}
    },
    // 商品添加到cars中，是为了计算商品总数量和价格选中状态
    addCars(state, goods) {
      state.cars.push(goods)
    },
    // 是将商品添加到carList，为了页面的渲染
    pushCar(state,goods){
      state.carList.push(goods)
    },
    // 更新商品全选状态
    updateGoodsAllChecked(state, checked) {
      state.cars.forEach(v => {
        v.ischecked = checked
      })
    },
    // 删除购物车商品
    removeCars(state, goodsId) {
      // 通过id找索引
      const index = state.cars.findIndex(v => v.id == goodsId)
      state.cars.splice(index, 1)
    },
    // 更新carList数组
    addCarList(state,data){
      state.carList = data
    },
    // 清除购物车数据
    clearCars(state){
      state.carList = []
      state.cars = []
    }
  },
  // getters 可以定义一些需要进行计算的数据，类型vue实例中的计算属性
  getters: {
    allCountAndPrice(state) {
      let allPrice = 0;
      let allCount = 0;

      state.cars.forEach(v => {
        allCount += parseInt(v.count)
        if (v.ischecked) {
          allPrice += v.count * v.price
        }
      })

      return {
        allPrice,
        allCount
      }
    },
    isAllChecked(state) {
      if (state.cars.length > 0) {
        return state.cars.every(v => v.ischecked)
      } else {
        return false
      }
    }
  },
  // 定义操作mutations的方法，一般都是异步方法
  actions: {
    // 目标: 是将数据存到state中，数据的来源是请求接口
    // state 中定义存储数据的属性
    // mutations 中定义操作数据的方法
    // actions 中定义请求数据的方法，在数据请求成功之后调用mutations中的方法

    // 定义一个请求购物车数据的函数
    fecthCarList(context) {
      getCarList().then(res => {
        context.commit('addCarList',res)
        res.forEach(v => {
          const car = {
            id: v.productId,
            count: v.count,
            price: v.price,
            ischecked: false
          }
          // 调用mutation中定义的addCars方法
          context.commit('addCars',car)
        })
      })
    }
  },
  modules: {
  }
})
